<template>
	<view class="content">
		<uni-forms ref="form" :value="form" :rules="rules" labelWidth="140px" border class="margin-top">
			<view class="margin-bottom-sm">
				<uni-forms-item required name="deviceId" class="bg-white">
					<template #label>
						<view class="flex align-center padding-lr required">
							<view class="text-black">设备IMEI</view>
						</view>
					</template>
					<view class="margin-right flex justify-end padding-tb-xs">
						<view class="flex align-center">
							<text class="margin-right">{{ form.deviceId }}</text>
							<uni-icons type="scan" size="20" color="#1D39C4" @click="openScan"></uni-icons>
						</view>
					</view>
				</uni-forms-item>
			</view>
			<view class="margin-bottom-sm">
				<uni-forms-item required name="buildings" class="bg-white solid-bottom">
					<template #label>
						<view class="flex align-center padding-lr required">
							<view class="text-black">建筑物</view>
						</view>
					</template>
					<view class="padding-tb-xs margin-right">
						<select-action-sheet
							ref="buildings"
							v-model="form.buildings"
							:addEvent="addBuilding"
							:api="getBuildingPage"
							title="选择建筑物"
							placeholder="请选择建筑物"
							searchName="buildingName"
							searchPlaceholder="请输入建筑物名称"
						>
							<template #label="{ selectItems }">
								<view class="flex response padding-lr" v-if="selectItems.length">
									<view>{{ selectItems.map((selectItem) => selectItem.buildingName).join(',') }}</view>
								</view>
							</template>
							<template #item="{ item }">
								<view class="">
									<view>
										<text class="text-xl text-bold">{{ item.buildingName }}</text>
										<text class="text-gray">{{ ` (${item.deptName || '无部门'})` }}</text>
									</view>
									<view class="margin-top-xs text-gray">
										{{ item.address }}
									</view>
								</view>
							</template>
						</select-action-sheet>
					</view>
				</uni-forms-item>
				<view class="bg-white" v-if="form.buildings">
					<view class="flex justify-between padding padding-lr-xl text-sm">
						<view>详细地址</view>
						<view>{{ form.buildings.address }}</view>
					</view>
					<view v-for="(item, index) in responderList" :key="index">
						<view v-if="form.buildings[item.name]" class="flex justify-between padding padding-lr-xl text-sm">
							<view>{{ item.label }}</view>
							<view>{{ form.buildings[item.name].phone }} {{ form.buildings[item.name].name }}</view>
						</view>
					</view>
				</view>
			</view>
		</uni-forms>
		<uni-forms :modelValue="form" label-position="top">
			<view class="margin-bottom-sm">
				<uni-forms-item required name="sceneImg" class="bg-white">
					<template #label>
						<view class="flex align-center padding">
							<view class="text-black">现场照片</view>
						</view>
					</template>
					<view class="margin-right padding-lr-lg">
						<upload v-model="form.sceneImg"></upload>
					</view>
				</uni-forms-item>
			</view>
			<view class="margin-bottom-sm">
				<uni-forms-item required name="remark" class="bg-white padding-tb solid-bottom">
					<template #label>
						<view class="flex align-center padding">
							<view class="text-black" style="width: max-content">备注</view>
						</view>
					</template>
					<view class="margin-right padding-lr-lg">
						<uni-easyinput
							style="font-size: 28upx"
							placeholderStyle="font-size: 28upx;"
							:inputBorder="false"
							autoHeight
							type="textarea"
							v-model="form.remark"
							placeholder="请输入内容"
						></uni-easyinput>
					</view>
				</uni-forms-item>
			</view>
		</uni-forms>

		<view style="height: 142upx"></view>
		<view class="padding bg-white fixed-bottom">
			<button type="primary" @click="adddevice">添加</button>
		</view>
	</view>
</template>
<script>
import { buildingDeviceCreate } from '@/api/devices/index';
import { getBuildingPage } from '@/api/building/index';
import { compareVersion, getParam } from '@/utils/common';

export default {
	data() {
		return {
			responderList: [
				{
					label: '一级接警人',
					name: 'firstResponderDO'
				},
				{
					label: '二级接警人',
					name: 'secondResponderDO'
				},
				{
					label: '三级接警人',
					name: 'thirdResponderDO'
				},
				{
					label: '四级接警人',
					name: 'fourthResponderDO'
				}
			],
			getBuildingPage: getBuildingPage,
			form: {
				remark: null,
				sceneImg: [],
				deviceId: null,
				deviceName: null,
				buildings: null
			},
			rules: {
				buildings: {
					rules: [
						{
							required: true,
							errorMessage: '请选择建筑物'
						}
					]
				},
				deviceId: {
					rules: [
						{
							required: true,
							errorMessage: '设备IMEI不能为空'
						}
					]
				}
			}
		};
	},
	onLoad(query) {
		const { IMIE } = query || {};
		this.form.deviceId = IMIE;
	},
	methods: {
		addBuilding() {
			this.$tab.navigateTo('/pages/mine/building/CreateOrEditBuilding');
			uni.$once('buildingListReload', () => {
				this.$refs.buildings.reload();
			});
		},
		adddevice() {
			this.$refs.form.validate().then((res) => {
				uni.showLoading({
					title: '创建中...'
				});
				if (this.form.sceneImg == [] || this.form.sceneImg == '' || this.form.sceneImg == null) {
					delete this.form.sceneImg
				}
				// console.log(JSON.stringify(this.form), 'form')
				buildingDeviceCreate({
					...this.form,
					buildingId: this.form.buildings.id
				})
					.then(({ data }) => {
						if (data) {
							uni.navigateBack();
						}
					})
					.finally(() => {
						uni.hideLoading();
					});
			});
		},
		openScan() {
			uni.scanCode({
				success: (res) => {
					console.log('条码类型：' + res.scanType);
					console.log('条码内容：' + res.result);
					const IMIE = getParam(res.result, 'deviceInfoId');
					this.form.deviceId = IMIE;
				}
			});
		}
	}
};
</script>
<style scoped>
.fixed-bottom {
	position: fixed;
	bottom: 0;
	width: 100%;
}
</style>
